// 使用示例
@import './utils.scss';

// 示例1：混合使用 vw 和 vh
.example-container {
  width: px2vw(960);    // 960px -> 50vw (占屏幕宽度的一半)
  height: px2vh(540);   // 540px -> 50vh (占屏幕高度的一半)
  padding: px2vw(20);   // 横向内边距用 vw
  margin-top: px2vh(30); // 垂直边距用 vh
}

// 示例2：响应式字体
.responsive-text {
  // 字体大小通常跟随宽度变化
  font-size: px2vw(24);
  
  // 行高可以跟随高度变化
  line-height: px2vh(36);
}

// 示例3：固定宽高比的元素
.aspect-ratio-box {
  width: px2vw(400);
  height: px2vw(300); // 使用同一个单位保持宽高比
}

// 示例4：全屏布局
.fullscreen-layout {
  .header {
    height: px2vh(80);  // 头部固定占屏幕高度的比例
  }
  
  .sidebar {
    width: px2vw(240);  // 侧边栏固定占屏幕宽度的比例
  }
  
  .content {
    // 剩余空间
    width: calc(100% - #{px2vw(240)});
    height: calc(100% - #{px2vh(80)});
  }
}